<template>
    <div class="login container">
        <div class="login_box">
            <div class="logo_header">
                <img :src='require("@/assets/imgs/logo.png")' alt="logo" />
            </div>
            <div class="login_conten"> 
                <div class="title">
                    <h2>会员登录</h2>
                    <span>该页面已经过安全加密</span>
                </div>
                <div class="form-group">
                    <p class="input-cell" for="username">
                        <i class="iconfont icon-youxiang"></i>
                        <input type="text" placeholder="Email或用户名" v-model="username" name="" id="username">
                    </p>
                    <p class="input-cell" for="password">
                        <i class="iconfont icon-mima"></i>
                        <input type="password" placeholder="password" v-model="password" name="" id="password">
                    </p>
                </div>
                <div class="btn_login">
                    <button @click="_loginuser" v-waves.button.float>登录账户</button>
                </div>
            </div>
        </div>
        <div class="mt-3">
            <div class="btn-groud">
                <button>忘记密码?</button>
                <router-link :to="{name:'注册'}" tag="button">创建新账户</router-link>
            </div>
        </div>
    </div>
</template>
<script>
import { loginuser} from "api/auto"

export default {
    data(){
        return {
            username:"",
            password:""
        }
    },
    methods:{
        _loginuser(){
            if(this.username.length>8||this.username.length<4){
                return this.$alert('用户名为4~8个字符！', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {}
                        });
            }
            let data = {
                username: this.username,
                userpaw: this.password
            }
            loginuser(data).then(res=>{
                if(res.code==0){
                    this.$router.push({name:"首页"})
                    return this.$message({
                                showClose: true,
                                message: '恭喜你，登录成功',
                                type: 'success'
                            });
                }else{
                    return this.$message({
                                showClose: true,
                                message: res.msg,
                                type: 'error'
                            });
                }
            })
        }
    },
    mounted(){

    }
}
</script>
<style lang="scss" scoped>

@media screen and (max-width: 1025px){
    .container{
        width: 90% !important;
        .login_box{
            max-width: 100%!important;
        }
        .btn-groud{
            width: 100%!important;
        }
    }
}
@media screen and (max-width: 752px){
    .container {
        width: 90%!important;
        .login_box{
            max-width: 100%!important;
        }
        .btn-groud{
            width: 100%!important;
        }
    }
}

@media screen and (max-width: 450px){
    .container{
       width: 90%!important;
        .login_box{
           max-width: 100%!important;
        }
        .btn-groud{
            width: 100%!important;
        }
    }
}
.container{
    width: 60%;
    margin: 0.81rem auto;
    .login_box{
        max-width: 41.9%;
        margin: 0 auto;
        background-color: #f4f5f7!important;
        border-radius: 0.1rem;
        box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07)!important;
        .logo_header{
            padding: 0.7rem 0.7rem;
            text-align: center;
            background: #ffffff;
            overflow: hidden;
            img{
                width: 100%;
            }

        }
        .login_conten{
            padding: 0.8rem;
            
            .title{
                padding-bottom: 0.5rem;
                text-align: center;
                h2{
                    font-size: 0.51rem;
                    padding-bottom: 0.4rem;
                }
                span{
                    color: #8898aa!important;
                }
            }
            .form-group{
                display: flex;
                flex-direction: column;
                overflow: hidden;
                .input-cell{
                    margin-bottom: 0.3rem;
                    background: #ffffff;
                    display: flex;
                    align-items: center;
                    box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
                    i{
                        padding: 0 0.2rem;
                        font-size: 0.5rem;
                    }
                    input{
                        padding: 0.21rem 0.21rem 0.21rem 0;
                        flex: 1;
                    }
                    input[placeholder]{
                        color: #8898aa!important;
                    }
                }
                .input-cell *{
                    color: #8898aa!important;
                }
                
            }
            .btn_login{
                margin: 0.3rem 0;
                text-align: center;
                button{
                    padding: 0.2rem 0.38rem;
                    color: #fff;
                    border-color: #5e72e4;
                    background-color: #5e72e4;
                    border-radius: 0.07rem;
                    font-weight: bold;
                    cursor: pointer;
                    transition: all 0.3s;
                }
                button:hover{
                    transform: translateY(-0.08rem);
                    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
                }
                button:active{
                    transform: translateY(-0.02rem);
                    box-shadow:0px;
                }
            }
            
        }
    }
    .mt-3{
        
        .btn-groud{
            width: 41.9%;
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            padding: 0.4rem 0.2rem;
            button{
                font-size: 0.26rem;
                padding: 0.06rem 0.16rem;
                border: 0.01rem solid #fb6340;
                border-radius: 0.08rem;
                color: #fb6340;
                background-color: transparent;
                cursor: pointer;
                transition: all 0.3s;
            }
            button:hover{
                background-color: #fb6340;
                color: #fff;
                box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
            }
        }
    }
}

</style>

